<template>
  <div class="play" ref="play">
    <i :style="{left:left + 'px'}" @mousedown="mousedown"></i>
  </div>
</template>

<script>

export default {
  data() {
    return {
      left:0
    }
  },
  methods:{
    mousedown() {
      this.checked = true
    }
  },
  mounted() {
    const playLeft = this.$refs.play.getBoundingClientRect().left
    const maxWidth = this.$refs.play.getBoundingClientRect().width - 12
    document.addEventListener('mousemove' , e => {
      if(this.checked) {
        console.log(e.clientX-playLeft)
        let left = e.clientX - playLeft - 6
        // 判断当前移动距离大于0 则让left等于0  
        if(left <= 0) left = 0
        // 判断当前移动的距离大于最大的距离  让left等于最大距离
        if(left >= maxWidth) left = maxWidth
        this.left = left
        // 往父组件传参数  当前移动距离 除以 总距离
        this.$emit('change',left / maxWidth)
      }
    }),
    document.addEventListener('mouseup' , e => {
      this.checked = false
    })
  }
}
</script>

<style lang="scss" scoped>
.play{
  margin: 15px 0;
  position: relative;
  width: 200px;
  height: 8px;
  background: #4c4c4c;
  border: 2px solid #333;
  i{
    position: absolute;
    left: 0px;
    top: -12px;
    width: 12px;
    height: 28px;
    background: blue;
    cursor: pointer;
  }
}
</style>